<template>
  <div class="ai_call" ref="aiRef" :style="{ height: domHeight + 'px' }">
    <!-- 页面头部 -->
    <div class="ai_call_header">
      <div class="header-left">
        <h3 class="page-title">
          <el-icon class="title-icon"><Phone /></el-icon>
          AI智能外呼
        </h3>
        <div class="task-summary">
          共 <span class="highlight-number">{{ total }}</span> 条任务
        </div>
      </div>
      <div class="header-actions">
        <el-button type="primary" size="default" @click="showCallPage">
          <el-icon class="mr-5px"><List /></el-icon>
          呼叫名单
        </el-button>
        <el-button type="primary" size="default" @click="showVoiceFile">
          <el-icon class="mr-5px"><Microphone /></el-icon>
          语音文件
        </el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="ai_content">
      <el-row class="ai_row" :gutter="16">
        <!-- 左侧任务列表 -->
        <el-col :span="6" class="row_left">
          <div class="task-panel">
            <!-- 任务操作区 -->
            <div class="task_header">
              <div class="header_actions">
                <el-button type="primary" size="default" @click="openForm('create')">
                  <el-icon class="mr-5px"><Plus /></el-icon>
                  新建任务
                </el-button>

                <el-popover placement="bottom" :width="380" trigger="click">
                  <div class="filter-panel">
                    <div class="filter-item">
                      <label class="filter-label">时间范围</label>
                      <el-date-picker
                        v-model="queryParams.createTime"
                        style="width: 100%"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        type="daterange"
                        size="default"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                      />
                    </div>
                    <div class="filter-item">
                      <label class="filter-label">任务状态</label>
                      <el-select
                        v-model="queryParams.status"
                        placeholder="请选择任务状态"
                        clearable
                        style="width: 100%"
                      >
                        <el-option
                          v-for="(v, k) in CallTaskstatusEnumMap"
                          :key="k"
                          :label="v"
                          :value="k"
                        />
                      </el-select>
                    </div>
                    <div class="filter-actions">
                      <el-button @click="handleQuery" type="primary">
                        <el-icon class="mr-5px"><Search /></el-icon>
                        筛选
                      </el-button>
                      <el-button @click="resetQuery">
                        <el-icon class="mr-5px"><Refresh /></el-icon>
                        重置
                      </el-button>
                    </div>
                  </div>
                  <template #reference>
                    <el-button size="default" plain>
                      <el-icon class="mr-5px"><Filter /></el-icon>
                      筛选
                    </el-button>
                  </template>
                </el-popover>
              </div>

              <!-- 搜索框 -->
              <div class="search-box">
                <el-input
                  v-model="queryParams.name"
                  placeholder="搜索任务名称"
                  clearable
                  @keydown="handleQuery"
                  class="search-input"
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
              </div>
            </div>

            <!-- 任务列表 -->
            <div class="task_content">
              <el-scrollbar class="task-scrollbar" @scroll="handleScroll" ref="containerRef">
                <div class="task-list-container">
                  <div
                    class="task-item"
                    :class="{ 'task-item--active': item.id == activeId }"
                    v-for="(item, index) in list"
                    @click="selectId(item)"
                    :key="item.id"
                  >
                    <!-- 任务头部 -->
                    <div class="task-header">
                      <div class="task-number">{{ index + 1 }}</div>
                      <div class="task-actions">
                        <el-tooltip content="刷新" placement="top">
                          <el-button
                            size="small"
                            text
                            @click.stop="refreshVal(false)"
                            class="action-btn"
                          >
                            <el-icon><Refresh /></el-icon>
                          </el-button>
                        </el-tooltip>

                        <el-dropdown trigger="hover" placement="bottom">
                          <el-button size="small" text class="action-btn">
                            <el-icon><MoreFilled /></el-icon>
                          </el-button>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="appendPhone(item)">
                                <el-icon><Plus /></el-icon>
                                追加号码
                              </el-dropdown-item>
                              <el-dropdown-item @click="taskHeavy(item.id)">
                                <el-icon><Refresh /></el-icon>
                                重新呼叫
                              </el-dropdown-item>
                              <el-dropdown-item @click="handleDelete(item.id)" divided>
                                <el-icon><Delete /></el-icon>
                                删除
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </div>

                    <!-- 任务标题 -->
                    <div class="task-title">
                      <h4>{{ item.name }}</h4>
                    </div>

                    <!-- 任务状态 -->
                    <div class="task-status">
                      <el-tag :type="getStatusType(item.status)" size="small" class="status-tag">
                        {{ getStatusText(item.status) }}
                      </el-tag>
                      <span class="call-progress">
                        {{ item.callCount }}/{{ item.numberCount }}
                      </span>
                    </div>

                    <!-- 进度条 -->
                    <div class="task-progress">
                      <el-progress
                        :percentage="comProgress(item)"
                        :stroke-width="6"
                        :show-text="false"
                        class="progress-bar"
                      />
                      <span class="progress-text">{{ comProgress(item) }}%</span>
                    </div>

                    <!-- 任务详情 -->
                    <div class="task-details">
                      <div class="detail-row">
                        <span class="detail-label">类型:</span>
                        <span class="detail-value">{{ CallTypeEnumMap[item.type] }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="detail-label">并发:</span>
                        <span class="detail-value">{{ item.maxNum }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="detail-label">开始:</span>
                        <span class="detail-value">{{ formatDate(item.startTime) }}</span>
                      </div>
                    </div>

                    <!-- 控制按钮 -->
                    <div class="task-controls">
                      <el-button
                        size="small"
                        text
                        @click="openForm('update', item.id)"
                        class="edit-btn"
                      >
                        <el-icon><Edit /></el-icon>
                        编辑
                      </el-button>

                      <el-button
                        :type="item.status == 9 ? 'danger' : 'success'"
                        size="small"
                        circle
                        @click="controlTask(item, item.status == 9 ? '停止' : '开始')"
                        class="control-btn"
                      >
                        <el-icon>
                          <VideoPause v-if="item.status == 9" />
                          <VideoPlay v-else />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>

                  <!-- 加载更多提示 -->
                  <div v-if="loading && list.length > 0" class="loading-more">
                    <el-icon class="is-loading"><Loading /></el-icon>
                    <span>加载中...</span>
                  </div>

                  <!-- 没有更多数据提示 -->
                  <div v-if="isHave && list.length > 0" class="no-more">
                    <span>没有更多数据了</span>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </el-col>

        <!-- 右侧详情区域 -->
        <el-col :span="18" class="row_right" v-if="activeItem">
          <div class="detail-panel">
            <!-- 详情头部 -->
            <div class="detail-header">
              <div class="header-info">
                <h3 class="task-name">{{ activeItem.name }}</h3>
                <el-tag :type="getStatusType(activeItem.status)" class="status-tag">
                  {{ getStatusText(activeItem.status) }}
                </el-tag>

                <el-popover placement="bottom" trigger="click">
                  <div class="time-schedule">
                    <div class="schedule-item" v-for="i in 3" :key="i">
                      <h4>执行时段 {{ i }}</h4>
                      <div class="time-row">
                        <span>开始：</span>
                        <el-tag type="success" size="small">
                          {{ activeItem[`startTime${i}`] || '--' }}
                        </el-tag>
                      </div>
                      <div class="time-row">
                        <span>结束：</span>
                        <el-tag type="danger" size="small">
                          {{ activeItem[`endTime${i}`] || '--' }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                  <template #reference>
                    <el-button type="primary" size="small"> 查看执行时间 </el-button>
                  </template>
                </el-popover>
              </div>

              <div class="header-actions">
                <el-button
                  v-if="activeItem.status != 9"
                  type="primary"
                  @click="controlTask(activeItem, '开始')"
                >
                  <el-icon><VideoPlay /></el-icon>
                  开始任务
                </el-button>
                <el-button v-else type="danger" @click="controlTask(activeItem, '停止')">
                  <el-icon><VideoPause /></el-icon>
                  停止任务
                </el-button>
              </div>
            </div>

            <!-- 统计信息 -->
            <div class="stats-bar">
              <div class="stat-item">
                <span class="stat-label">开始时间</span>
                <span class="stat-value">{{ formatDate(activeItem.startTime) || '--' }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">结束时间</span>
                <span class="stat-value">{{ formatDate(activeItem.endTime) || '--' }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">总量</span>
                <span class="stat-value highlight">{{ activeItem.numberCount || 0 }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">已拨打</span>
                <span class="stat-value success">{{ activeItem.callCount || 0 }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">待拨打</span>
                <span class="stat-value warning">{{
                  activeItem.numberCount - activeItem.callCount || 0
                }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">推送微信</span>
                <span class="stat-value info">{{ num || 0 }}</span>
              </div>
            </div>

            <!-- 标签页内容 -->
            <div class="content-tabs">
              <div class="tabs-header">
                <el-radio-group v-model="tabPosition" size="default">
                  <el-radio-button label="1">数据统计</el-radio-button>
                  <el-radio-button label="2">号码管理</el-radio-button>
                  <el-radio-button label="3">通话记录</el-radio-button>
                  <el-radio-button label="4">后续动作</el-radio-button>
                </el-radio-group>

                <!-- 统计筛选 -->
                <div class="tab-filters" v-if="tabPosition == '1'">
                  <el-date-picker
                    v-model="statisticsTime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="daterange"
                    size="default"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                    class="date-picker"
                  />
                  <el-button type="primary" @click="handleQuery"> 筛选 </el-button>
                </div>
              </div>

              <!-- 标签页内容区 -->
              <div class="tab-content">
                <statistics
                  v-if="tabPosition == '1'"
                  :activeItem="activeItem"
                  :statisticsTime="statisticsTime"
                  @setNum="setNum"
                />
                <numberBox v-if="tabPosition == '2'" :activeItem="activeItem" />
                <CallLog v-if="tabPosition == '3'" :activeItem="activeItem" />
                <SubsequentActions v-if="tabPosition == '4'" :activeItem="activeItem" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- 弹窗组件 -->
  <TaskForm ref="formRef" @success="refreshVal" />
  <AppendTask ref="appendRefs" @success="refreshVal" />
  <HeavyTask ref="heavyRefs" @success="refreshVal" />
  <CallList ref="callRefs" />
  <VoiceFileManagement ref="voiceRefs" />
</template>

<script setup>
import { formatDate } from '@/utils/formatTime'
import {
  Search,
  MoreFilled,
  Refresh,
  Edit,
  Delete,
  Plus,
  Filter,
  Phone,
  List,
  Microphone,
  View,
  VideoPlay,
  VideoPause,
  Loading
} from '@element-plus/icons-vue'
import TaskForm from '@/views/call/task/TaskForm3.vue'
import AppendTask from '@/views/call/task/append.vue'
import HeavyTask from '@/views/call/task/heavyTask/index2.vue'
import CallList from '@/views/call/task/callList/index.vue'
import VoiceFileManagement from '@/views/call/task/voiceFile/index.vue'
import { dateFormatter } from '@/utils/formatTime'
import statistics from './components/statistics.vue'
import numberBox from './components/number.vue'
import CallLog from './components/call_log.vue'
import SubsequentActions from './components/subsequent_actions.vue'
import { emitter } from '@/utils/eventBus.ts'

const message = useMessage()
const { t } = useI18n()
import * as TaskApi from '@/api/call/task'

const tabPosition = ref('1')
const statisticsTime = ref('')
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  createTime: '',
  status: '',
  type: 2,
  sortStr: JSON.stringify({ createTime: 'desc' })
})

const CallTypeEnumMap = {
  1: '群呼转坐席',
  2: '群呼转机器人'
}

const CallTaskstatusEnumMap = {
  0: '执行完毕',
  1: '等待执行',
  2: '执行错误',
  3: '暂停',
  4: '手动停止',
  9: '执行中'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'success', // 执行完毕
    1: 'primary', // 等待执行
    2: 'danger', // 执行错误
    3: 'warning', // 暂停
    4: 'warning', // 手动停止
    9: 'success' // 执行中
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  return CallTaskstatusEnumMap[status] || '未知状态'
}

const loading = ref(false)
const list = ref([])
const total = ref(0)

// 搜索名称
const handleQuery = () => {
  queryParams.pageNo = 1
  isHave.value = false
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.createTime = ''
  queryParams.status = ''
  queryParams.type = 2
  handleQuery()
}

const activeId = ref(null)
const activeItem = ref(null)

// 选择任务
const selectId = (item) => {
  activeId.value = item.id
  activeItem.value = item
}

// 查询列表
const getList = async () => {
  loading.value = true
  try {
    const data = await TaskApi.getTaskPage(queryParams)
    list.value = data.list
    total.value = data.total
    if (data.list.length && !activeId.value) {
      activeItem.value = data.list[0]
      activeId.value = data.list[0].id
    }
  } finally {
    loading.value = false
  }
}

// 查询列表2
const getList2 = async () => {
  loading.value = true
  try {
    const data = await TaskApi.getTaskPage(queryParams)
    list.value = data.list
    total.value = data.total
    if (data.list.length) {
      activeItem.value = data.list[0]
      activeId.value = data.list[0].id
    }
  } finally {
    loading.value = false
  }
}

// 启动、停止
const controlTask = async (row, name) => {
  await ElMessageBox.confirm(`确认${name}任务吗？`, '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
  })
  const data = {
    id: row.id,
    action: row.status == 9 ? 'stop' : 'start'
  }
  await TaskApi.controlTask(data)
  queryParams.pageNo = 1
  if (data.action == 'start') {
    message.success('操作成功，请通知坐席进入呼叫中心并登录话机')
    isHave.value = false
    getList2()
  } else {
    message.success('操作成功')
    refreshVal()
  }
}

// 计算进度
const comProgress = (item) => {
  return Math.floor((item.callCount / item.numberCount) * 100) || 0
}

// 添加/修改操作
const formRef = ref()
const openForm = (type, id) => {
  formRef.value.open(type, id)
}

const { push } = useRouter()

// 打开详情
const goDetail = (id) => {
  push('/task/taskDetail?id=' + id)
}

const appendRefs = ref(null)
// 追加
const appendPhone = (item) => {
  appendRefs.value.open(item.taskId)
}

const heavyRefs = ref(null)
// 任务重呼
const taskHeavy = (id) => {
  heavyRefs.value.open(id)
}

// 查询列表3
const getList3 = async (val) => {
  loading.value = true
  try {
    const data = await TaskApi.getTaskPage(queryParams)
    list.value = data.list
    total.value = data.total
    if (data.list.length && val) {
      activeItem.value = data.list[0]
      activeId.value = data.list[0].id
    }
  } finally {
    loading.value = false
  }
}

// 删除按钮操作
const handleDelete = async (id) => {
  try {
    await message.delConfirm()
    await TaskApi.deleteTask(id)
    message.success(t('common.delSuccess'))
    queryParams.pageNo = 1
    isHave.value = false
    getList3(activeId.value == id)
  } catch {}
}

const callRefs = ref(null)
// 显示呼叫名单
const showCallPage = () => {
  callRefs.value.open()
}

// 显示语音文件
const voiceRefs = ref(null)
const showVoiceFile = () => {
  voiceRefs.value.open()
}

const aiRef = ref(null)
const containerRef = ref(null)
const isHave = ref(false)

// 修复无限滚动功能
const handleScroll = async ({ scrollTop }) => {
  const container = containerRef.value?.wrapRef
  if (!container) return

  // 检查是否滚动到底部
  const isBottom = scrollTop + container.clientHeight >= container.scrollHeight - 10

  if (isBottom && !isHave.value && !loading.value) {
    loading.value = true
    queryParams.pageNo += 1

    try {
      const data = await TaskApi.getTaskPage(queryParams)
      if (data.list.length > 0) {
        // 追加新数据
        list.value.push(...data.list)
        isHave.value = false
      } else {
        // 没有更多数据
        isHave.value = true
        queryParams.pageNo -= 1 // 回退页码
      }
    } catch (error) {
      console.error('加载更多数据失败:', error)
      queryParams.pageNo -= 1 // 出错时回退页码
    } finally {
      loading.value = false
    }
  }
}

emitter.on('refreshAiTask', () => {
  refreshVal()
})
const domHeight = ref(0)
// 刷新
const refreshVal = () => {
  queryParams.pageNo = 1
  isHave.value = false
  getList()
}

const num = ref(0)
const setNum = (val) => {
  num.value = val
}

onMounted(() => {
  domHeight.value = aiRef.value.parentElement.offsetHeight - 40
  refreshVal()
})
</script>

<style lang="scss" scoped>
.ai_call {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
  overflow: hidden;

  // 页面头部 - 固定高度
  .ai_call_header {
    flex-shrink: 0;
    height: 64px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .header-left {
      display: flex;
      align-items: center;
      gap: 24px;

      .page-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;

        .title-icon {
          color: #0052cc;
          font-size: 20px;
        }
      }

      .task-summary {
        color: #6b7280;
        font-size: 14px;

        .highlight-number {
          color: #0052cc;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  // 主要内容区域 - 自适应剩余高度
  .ai_content {
    flex: 1;
    min-height: 0; // 重要：允许flex子项收缩

    .ai_row {
      height: 100%;

      // 左侧任务列表
      .row_left {
        height: 100%;

        .task-panel {
          background: #fff;
          border-radius: 8px;
          height: 100%;
          display: flex;
          flex-direction: column;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

          .task_header {
            flex-shrink: 0;
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;

            .header_actions {
              display: flex;
              gap: 12px;
              margin-bottom: 16px;
            }

            .search-box {
              .search-input {
                border-radius: 6px;

                :deep(.el-input__wrapper) {
                  border-radius: 6px;
                }
              }
            }
          }

          .task_content {
            flex: 1;
            min-height: 0; // 重要：允许滚动容器收缩

            .task-scrollbar {
              height: 100%;
            }

            .task-list-container {
              padding: 0 20px 20px;
            }

            .task-item {
              padding: 16px;
              border: 2px solid transparent;
              border-radius: 8px;
              margin-bottom: 12px;
              background: #fafbfc;
              transition: all 0.2s ease;
              cursor: pointer;

              &:hover {
                background: #f8faff;
                border-color: #e8f4ff;
              }

              &--active {
                background: #f0f7ff;
                border-color: #0052cc;
                box-shadow: 0 2px 8px rgba(0, 82, 204, 0.15);
              }

              .task-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;

                .task-number {
                  width: 32px;
                  height: 20px;
                  background: #0052cc;
                  color: #fff;
                  border-radius: 4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 12px;
                  font-weight: 500;
                }

                .task-actions {
                  display: flex;
                  gap: 4px;

                  .action-btn {
                    color: #6b7280;

                    &:hover {
                      color: #0052cc;
                    }
                  }
                }
              }

              .task-title {
                margin-bottom: 12px;

                h4 {
                  margin: 0;
                  font-size: 14px;
                  font-weight: 500;
                  color: #1f2937;
                  line-height: 1.4;
                }
              }

              .task-status {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;

                .status-tag {
                  font-size: 12px;
                }

                .call-progress {
                  font-size: 12px;
                  color: #6b7280;
                  font-family: 'Monaco', 'Menlo', monospace;
                }
              }

              .task-progress {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 12px;

                .progress-bar {
                  flex: 1;
                }

                .progress-text {
                  font-size: 12px;
                  color: #6b7280;
                  min-width: 32px;
                  text-align: right;
                }
              }

              .task-details {
                margin-bottom: 12px;

                .detail-row {
                  display: flex;
                  align-items: center;
                  margin-bottom: 4px;
                  font-size: 12px;

                  .detail-label {
                    color: #6b7280;
                    width: 40px;
                    flex-shrink: 0;
                  }

                  .detail-value {
                    color: #374151;
                    flex: 1;
                  }
                }
              }

              .task-controls {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .edit-btn {
                  color: #6b7280;
                  font-size: 12px;

                  &:hover {
                    color: #0052cc;
                  }
                }

                .control-btn {
                  width: 32px;
                  height: 32px;
                }
              }
            }

            // 加载状态样式
            .loading-more {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8px;
              padding: 16px;
              color: #6b7280;
              font-size: 14px;

              .el-icon {
                font-size: 16px;
              }
            }

            .no-more {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 16px;
              color: #9ca3af;
              font-size: 12px;
            }
          }
        }
      }

      // 右侧详情区域
      .row_right {
        height: 100%;

        .detail-panel {
          background: #fff;
          border-radius: 8px;
          height: 100%;
          display: flex;
          flex-direction: column;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

          .detail-header {
            flex-shrink: 0;
            padding: 20px 24px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header-info {
              display: flex;
              align-items: center;
              gap: 16px;

              .task-name {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
              }
            }
          }

          .stats-bar {
            flex-shrink: 0;
            padding: 16px 24px;
            background: #f8faff;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            gap: 32px;

            .stat-item {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .stat-label {
                font-size: 12px;
                color: #6b7280;
              }

              .stat-value {
                font-size: 16px;
                font-weight: 600;
                color: #1f2937;

                &.highlight {
                  color: #0052cc;
                }

                &.success {
                  color: #10b981;
                }

                &.warning {
                  color: #f59e0b;
                }

                &.info {
                  color: #6366f1;
                }
              }
            }
          }

          .content-tabs {
            flex: 1;
            min-height: 0; // 重要：允许标签页内容收缩
            display: flex;
            flex-direction: column;

            .tabs-header {
              flex-shrink: 0;
              padding: 20px 24px;
              border-bottom: 1px solid #f0f0f0;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .tab-filters {
                display: flex;
                align-items: center;
                gap: 12px;

                .date-picker {
                  width: 300px;
                }
              }
            }

            .tab-content {
              flex: 1;
              min-height: 0; // 重要：允许内容区域收缩
              padding: 24px;
              overflow: auto;
            }
          }
        }
      }
    }
  }
}

// 筛选面板样式
.filter-panel {
  .filter-item {
    margin-bottom: 16px;

    .filter-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #374151;
      font-weight: 500;
    }
  }

  .filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }
}

// 时间安排样式
.time-schedule {
  .schedule-item {
    margin-bottom: 16px;

    h4 {
      margin: 0 0 8px 0;
      font-size: 14px;
      color: #374151;
    }

    .time-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      font-size: 12px;

      span:first-child {
        color: #6b7280;
        width: 40px;
      }
    }
  }
}

// 全局按钮样式覆盖
:deep(.el-button--primary) {
  background-color: #0052cc;
  border-color: #0052cc;

  &:hover {
    background-color: #0066ff;
    border-color: #0066ff;
  }

  &:active {
    background-color: #003d99;
    border-color: #003d99;
  }
}

:deep(.el-radio-button__inner) {
  border-color: #d1d5db;
  color: #6b7280;

  &:hover {
    color: #0052cc;
  }
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: #0052cc;
  border-color: #0052cc;
  color: #fff;
}

:deep(.el-progress-bar__outer) {
  background-color: #f3f4f6;
}

:deep(.el-progress-bar__inner) {
  background-color: #0052cc;
}

// 滚动条样式
:deep(.el-scrollbar__bar) {
  opacity: 0.6;
}

:deep(.el-scrollbar__thumb) {
  background-color: #d1d5db;
  border-radius: 4px;

  &:hover {
    background-color: #9ca3af;
  }
}
</style>
